<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.bar {
				width: 200px;
				height: 20px;
				border: 1px solid red;
				border-radius: 10px;
			}
			.bar-in {
				width: 50%;
				height: 100%;
				border-radius: 10px;
				background-color: red;
				transition:width 1s;
				/* 千万记住谁做过渡给谁加,这里是给.bar-in做过渡效果 */
			}
			.bar:hover .bar-in {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="bar">
			<div class="bar-in"></div>
		</div>
	</body>
</html>
